<template>
  <div class="max-w-4xl mx-auto px-4 py-8">
    <div class="bg-white shadow-lg rounded-lg overflow-hidden">
      <div class="p-6">
        <h1 class="text-2xl font-bold text-gray-900 mb-6">發表文章</h1>
        
        <form @submit.prevent="handleSubmit">
          <div class="mb-6">
            <label for="title" class="block text-sm font-medium text-gray-700 mb-2">標題</label>
            <input
              type="text"
              id="title"
              v-model="title"
              required
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="請輸入文章標題"
            />
          </div>

          <div class="mb-6">
            <label for="content" class="block text-sm font-medium text-gray-700 mb-2">內容</label>
            <textarea
              id="content"
              v-model="content"
              required
              rows="15"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              placeholder="請輸入文章內容"
            ></textarea>
          </div>

          <div class="flex justify-end space-x-4">
            <button
              type="button"
              @click="handleCancel"
              class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            >
              取消
            </button>
            <button
              type="submit"
              :disabled="isSubmitting"
              class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50"
            >
              {{ isSubmitting ? '發布中...' : '發布文章' }}
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../stores/user'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const router = useRouter()
const userStore = useUserStore()

const title = ref('')
const content = ref('')
const isSubmitting = ref(false)

const handleSubmit = async () => {
  if (!userStore.isLoggedIn) {
    ElMessage.warning('請先登錄')
    router.push('/login')
    return
  }

  isSubmitting.value = true
  try {
    console.log('發送文章請求，當前用戶信息:', {
      userId: userStore.userId,
      token: userStore.token,
      headers: {
        'Authorization': `Bearer ${userStore.token}`
      }
    })
    
    await axios.post('/content/articles', {
      title: title.value,
      content: content.value
    }, {
      headers: {
        'Authorization': `Bearer ${userStore.token}`
      }
    })
    
    ElMessage.success('文章發布成功')
    router.push('/')
  } catch (error) {
    console.error('發布文章失敗:', error)
    if (error.response?.status === 401) {
      ElMessage.error('權限不足')
      console.log('401 錯誤詳情:', {
        status: error.response.status,
        data: error.response.data,
        headers: error.response.headers
      })
    } else {
      ElMessage.error('發布失敗，請稍後重試')
    }
  } finally {
    isSubmitting.value = false
  }
}

const handleCancel = () => {
  if (title.value || content.value) {
    if (confirm('確定要放棄編輯嗎？')) {
      router.push('/')
    }
  } else {
    router.push('/')
  }
}
</script> 